@extends('LevelIntroduction.template.layout')


@section('back')
  <div class="back-icon" onclick="window.history.back()">
  </div>
@endsection

@section('content')
  <div class="wrap" id="wrap">
    <div class="page-content">
      <div class="p-up">
        <div class="preview section">
          <div class="menu-icon icon"></div>
          <div class="header"> 内容导览 Preview</div>
          <div class="age content">

            <div class="title">
              <div class="age-icon"></div>
              适用年龄:
            </div>
            <span class="num"></span>
          </div>

          <div id="material" class="material content">

            <div class="title">
              <div class="material-icon"></div>
              对应等级
            </div>
            <ul class="material-list">
            </ul>
          </div>

          <div class="brief content">

          </div>

          <img class="intro-img" src="">

        </div>


        <div class="objects section">
          <div class="goal-icon icon"></div>
          <div class="header">学习目标 Learning Objects</div>

          <div class="object-item">
            <div class="title">主题</div>
            <ul class="content scenario-list">
            </ul>
          </div>

          <div class="object-item">
            <div class="title" id="vocab-senten">词汇/典型例句</div>
            <div class="content vocab-senten">

            </div>
          </div>

          {{--<div class="object-item">--}}
          {{--<div class="title">新增语法点</div>--}}
          {{--<div class="content">--}}
          {{--<p class="item">{{$level['objects']['newGrammar']}}</p>--}}
          {{--</div>--}}
          {{--</div>--}}
        </div>

      </div>
      <div class="p-down">

        <div class="section unit-detail">
          <div class="flag-icon icon"></div>
          <div class="header">单元介绍 Introduction by Unit</div>


          <div class="unit-list"></div>
        </div>
      </div>
    </div>
  </div>
@stop

@section('script')
  <script type="text/javascript">


    $(document).ready(function () {

//		$('#wrap').height(window.innerHeight - 100);
//
//		$(window).resize(function () {
//			$('#wrap').height(window.innerHeight - 100);
//		});
    })

    var requestUrlArray = window.location.href.split('/')
    var requestCourseId = requestUrlArray[requestUrlArray.length - 1]

    //level 基本信息
    $.getJSON('/levelIntroductionJson/courseIntroduction.json', function (data) {
      var courseInfo = data['course' + requestCourseId]
      $('.num').text(courseInfo.preview.age)
      courseInfo.preview.material.forEach(function (data) {
        if (data !== '') {
          $('.material-list').append('<li class="item"> <span></span>' + data + '</li>')
        } else {
          $('.material-list').append('<li class="item" style="display:none"> <span></span>' + data + '</li>')
        }
      })

      courseInfo.preview.brief.forEach(function (data) {
        $('.brief').append('<p class="item">' + data + '</p>')

      })

      $('.intro-img').attr('src', courseInfo.image)

      courseInfo.objects.scenario.forEach(function (data) {
        $('.scenario-list').append('<li class="item">' + data + '</li>')
      })

      courseInfo.objects.vs.forEach(function (data) {
        $('.vocab-senten').append('<span class="item">' + data + '</span>')
      })

    })

    //level unit 课程信息
    $.getJSON('/levelIntroductionJson/course' + requestCourseId + '.json', function (data) {
      var courseDetail = data
      courseDetail.chapters.forEach(function (data, key) {
        var html = ''

        if (key === 0) {
          html += '<div class="unit active-unit">'
          $('.unit-list').append('<span class="select">Unit ' + (key + 1) + '</span>')
        } else {
          html += '<div class="unit">'
          $('.unit-list').append('<span>Unit ' + (key + 1) + '</span>')
        }

        html += '<div class="object">' +
          '<span class="title">' + ($.trim(data.name) !== '' ? data.name + ': ' : '') + '</span>' +
          '<span class="item">' + data.description + '</span>' +
          '</div>' +

          '<table class="unit-content">' +
          '<tr>' +
          '<th class="short"><a class="download-unit-pdf" href="https://gate.97kid.com/s/handouts/course/1/chapter/' + data.id + '/lesson/0"> Unit ' + (key + 1) + ' 讲义下载</a></th>' +
          '<th class="long">主题</th>' +
          '<th class="long">词汇</th>' +
          '<th class="long">句型</th>' +
          '</tr>'

        data.lessons.forEach(function (unitDetail) {
          var sentence = unitDetail.sentence === '' || unitDetail.sentence === null ? '' : unitDetail.sentence.replace(/\n/g, '<br>')
          html += '<tr>' +

            '<td class="short">Lesson ' + (unitDetail.name || '') + '  <a class="download-lesson-pdf" href="https://gate.97kid.com/s/handouts/course/1/chapter/' + data.id + '/lesson/' + unitDetail.id + '"> 讲义下载</a></td>' +
            '<td class="long">' +
            '<span class="item">' + (unitDetail.descriptionCN || '') + '</span>' +
            '</td>' +
            '<td class="long">' +
            '<span class="item">' + (unitDetail.vocabulary || '') + '</span>' +
            '</td>' +
            '<td class="long">' +
            '<span class="item">' + (sentence || '') + '</span>' +
            '</td>' +
            '</tr>'
        })

        html += '</table></div>'

        $('.unit-detail').append(html)
      })
      $('.unit-list').append('<div class="u-nav-cursor" id="unavCursor"></div>')
      $('.unit-list span').click(function () {

        var nav = $(this)
        var navIndex = $(this).index()
        nav.fadeOut(125).addClass('select').fadeIn(125).siblings('span').removeClass('select')
        $('#unavCursor').animate({
          left: nav.position().left
        }, 250)
        $('.unit').eq(navIndex).addClass('active-unit').siblings('.unit').removeClass('active-unit')
      })
      if (data.seriesId === 3) {
        $('#material').hide()
        $('#vocab-senten').text('高频词句')
      }

    })

  </script>
@stop

